<template>
  <view class="topTab flex items_center justify_around">
    <view class="tabTab_body">
	  <view v-if="disabledStock || readonly" class="topTab_item">{{ stockName ? stockName : "请选择仓库" }}</view>
      <picker v-else class="topTab_item" range-key="stockName" :range="options" :value="chooseOptions"
              @change="stockChange">{{ stockName ? stockName : "调入仓库" }}
        <i class="iconfont icon-xiala topTab_item_arrow"></i>
      </picker>
    <template v-if="isLocation && (locationList && locationList.length === 0)">
        <view class="topTab_item" @click="handleBarnChoose()">{{ locationName ? locationName : "请选择仓位" }}
          <i class="iconfont icon-xiala topTab_item_arrow" v-if="!readonly"></i>
        </view>
      </template>
	 <!-- <template v-if="locationList && locationList.length > 0">
	  	<picker class="topTab_item" range-key="locationName" :range="locationList"
	  	        @change="handleLocationChoose">{{ locationName ? locationName : "请选择仓位" }}
	  	  <i class="iconfont icon-xiala topTab_item_arrow" v-if="!readonly"></i>
	  	</picker>
	  </template> -->
      <view class="topTab_item">{{ userInfo ? userInfo : '' }}</view>
    </view>
  </view>
</template>
<script>
export default {
  name: "topTab",
  props: {
    options: {
      type: Array,
      default() {
        return [];
      }
    },
    locationName: {
      type: String,
      default: "",
    },
	stockNameProp: {
	  type: String,
	  default: "",
	},
    isLocation: {
      type: Boolean,
      default: true,
    },
    disabledStock: {
      type: Boolean,
      default: false,
    },
	locationList: {
		type: Array,
		default() {
		  return [];
		}
	},
	defaultStock: {
		type: Boolean,
		default: false
	},
	readonly: {
		type: Boolean,
		default: false
	}
  },
  data() {
    return {
      userInfo: null,
      stockName: "",
      chooseOptions: []
    }
  },
  watch: {
    // 父组件传入的仓库名变化时同步
    stockNameProp(newVal) {
      this.stockName = newVal || "";
    },
    // 父组件异步加载仓库列表时更新显示
    options: {
      handler(newVal) {
        if (!this.stockName && newVal && newVal.length > 0 && this.defaultStock) {
          this.stockName = newVal[0].stockName;
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
	  console.log(this.stockNameProp)
    this.userInfo = uni.getStorageSync("userName") ? uni.getStorageSync("userName") : null
    if (this.stockNameProp) {
	  this.stockName = this.stockNameProp
	} else if (this.options && this.defaultStock) {

      // this.stockName = this.options[0].stockName??""

    }
  },
  methods: {
    /**
     * 选择仓库
     */
    stockChange(e) {
	  if (this.readonly) return
      this.stockName = this.options[e.detail.value].stockName
      this.$emit("stockChange", e.detail.value)
    },

    /**
     * 选择仓位
     */
    handleBarnChoose() {
	  if (this.readonly) return
      this.$emit("handleBarnChoose")
    },
	
	handleLocationChoose(e) {
		if (this.readonly) return
		let index = e.detail.value
		this.$emit("handleBarnChoose", JSON.stringify({locationNo: this.locationList[index].locationNo, locationName: this.locationList[index].locationName}))
	}
  }
}
</script>
<style lang="scss" scoped>
@import "../../static/css/common";


</style>
